<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>维维我爱你</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/style.css">
	<link href="js/default.css" type="text/css" rel="stylesheet"/>

	<style type="text/css">
		*{
			margin:0 auto;
			padding:0;
		}
		@keyframes rotate{
			0%{
				transform:rotateX(0deg) rotateY(0deg);
			}
			100%{
				transform:rotateX(360deg) rotateY(360deg);
			}
		}
		html{
			background:linear-gradient(#ff0 0%, #000 80%);
			height:100%;
		}
		.wrap{
			margin-top:200px;
			perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
		}
		.cube{
			width:200px;
			height:200px;
			position:relative;
			color:#fff;
			font-size:36px;
			font-weight:bold;
			text-align:center;
			line-height:200px;
			transform-style:preserve-3d; /* 默认flat 2D */
			transform:rotateX(-30deg) rotateY(-70deg);
			animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
		}
		.cube > div{
			width:100%;
			height:100%;
			border:1px solid red;
			position:absolute;
			background-color:#333;
			opacity:.6;
			transition:transform 0.4s ease-in;
		}
		.cube .out-front{
			transform: translateZ(100px);
		}
		.cube .out-back{
			transform: translateZ(-100px) rotateY(180deg);
		}
		.cube .out-left{
			transform: translateX(-100px) rotateY(-90deg);
		}
		.cube .out-right{
			transform: translateX(100px) rotateY(90deg);
		}
		.cube .out-top{
			transform: translateY(-100px) rotateX(90deg);
		}
		.cube .out-bottom{
			transform: translateY(100px) rotateX(-90deg);
		}
		.cube > span{
			display:block;
			width:100px;
			height:100px;
			border:1px solid red;
			background-color:#333;
			position:absolute;
			top:50px;
			left:50px;
		}
		.cube .in-front{
			transform: translateZ(50px);
		}
		.cube .in-back{
			transform: translateZ(-50px) rotateY(180deg);
		}
		.cube .in-left{
			transform: translateX(-50px) rotateY(-90deg);
		}
		.cube .in-right{
			transform: translateX(50px) rotateY(90deg);
		}
		.cube .in-top{
			transform: translateY(-50px) rotateX(90deg);
		}
		.cube .in-bottom{
			transform: translateY(50px) rotateX(-90deg);
		}
		.wrap:hover .out-front{
			transform: translateZ(200px);
		}
		.wrap:hover .out-back{
			transform: translateZ(-200px) rotateY(180deg);
		}
		.wrap:hover .out-left{
			transform: translateX(-200px) rotateY(-90deg);
		}
		.wrap:hover .out-right{
			transform: translateX(200px) rotateY(90deg);
		}
		.wrap:hover .out-top{
			transform: translateY(-200px) rotateX(90deg);
		}
		.wrap:hover .out-bottom{
			transform: translateY(200px) rotateX(-90deg);
		}

	</style>
	<style type="text/css">
		*{margin:0;padding:0;}
		.top{width:500px;height:100px;margin:50px auto;font-size:50px;font-family:"华文行楷";color:mediumvioletred;
		<!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);
        -webkit-background-clip:text;-->}
		/*end top*/
		/*start box*/
		.box{width:40%;height:310px;margin:auto;perspective:900px;/*景深*/}
		.box .pic{position:relative;transform-style:preserve-3d;/*3d环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}
		.box ul li{list-style:none;position:absolute;top:0;left:0;}
		/*start box*/
		/*定义一个关键帧*/
		@keyframes play{
		from{transform:rotateY(0deg);}
		to{transform:rotateY(360deg);}

		}
		#text {
			width: 600px;
			height: 300px;
			color:mediumvioletred;
			margin: auto;
			font-size: 40px;
			font-family: "方正喵呜体";
		}

	</style>
</head>
<body>
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>



<div class="htmleaf-header">
	<div class="top">
	时光不老，我们不散
</div>

	<div class="box">

		<div class="pic">
			<ul>
				<li><img src="images/zzj.png" /></li>
				<li><img src="images/2.png" /></li>
				<li><img src="images/zzj1.png" /></li>
				<li><img src="images/5.png" /></li>
				<li><img src="images/zzj2.png" /></li>
				<li><img src="images/3.png" /></li>

			</ul>
		</div>
	</div>
	<div class="box">

	<div class="wrap">
		<div class="cube">
			<div class="out-front" style="background-image: url('images/2.png '); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%; "></div>
			<div class="out-back" style="background-image: url('images/1.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;"></div>
			<div class="out-left" style="background-image: url('images/3.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;"></div>
			<div class="out-right" style="background-image: url('images/5.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;"></div>
			<div class="out-top" style="background-image: url('images/6.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;"></div>
			<div class="out-bottom" style="background-image: url('images/11.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;"></div>

			<span class="in-front"></span>
			<span class="in-back"></span>
			<span class="in-left"></span>
			<span class="in-right"></span>
			<span class="in-top"></span>
			<span class="in-bottom"></span>
		</div>
	</div>
	</div>
	<br>
	<br>
	<div id="text"></div>

	<audio src="mu.mp3" id="Jaudio" class="media-audio" autoplay="" preload="" loop="loop"></audio>
</div>
<div class="mainDiv">
	<div id="content" style="width: 500px; height: 625px; margin-top: -20px;">
		<div id="loveHeart">
			<canvas id="garden" width="500" height="625" >

			</canvas>
		</div>
	</div>
</div>

	<script src="js/index.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
	<script type="text/javascript" src="js/functions.js"></script>
<!--雪花-->
<script>

    $(".pic ul li").each(function (i) {//遍历
        var deg = 360 / $(".pic ul li").size();//size个数
        //当前的li对象 添加css样式
        $(this).css({"transform": "rotateY(" + deg * i + "deg) translateZ(216px)"});

        /**$.fn.snow({
		minSize:10,
		maxSize:15,
		newOn:500,
		flakeColor:"#ffffff"
	});**/
    });


    function audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
            audio.play();
        }, false);
    }
    audioAutoPlay('Jaudio');

</script>
	<script type="text/javascript">
        var i = 0;
        var str = "能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！";

        window.onload = function typing() {
            //获取div
            var mydiv = document.getElementById("text");
            mydiv.innerHTML += str.charAt(i);
            i++;
            var id = setTimeout(typing, 100);
            if (i == str.length) {
                clearTimeout(id);
            }
        }
        setInterval(function () {
            create();
        }, 5000);

        var offsetX = $("#loveHeart").width() / 2;
        var offsetY = $("#loveHeart").height() / 2 - 55;

        if (!document.createElement('canvas').getContext) {
            var msg = document.createElement("div");
            msg.id = "errorMsg";
            msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
            document.body.appendChild(msg);
            $("#code").css("display", "none")
            $("#copyright").css("position", "absolute");
            $("#copyright").css("bottom", "10px");
            document.execCommand("stop");
        } else {
            setTimeout(function () {
                startHeartAnimation();
            }, 500);
        }
        aaa();
        setInterval(function () {
            aaa();
        }, 5000);

        function aaa() {
            $(".out-front").css("transform","translateZ(200px)");
            $(".out-back").css("transform","translateZ(-200px) rotateY(180deg)");
            $(".out-left").css("transform","translateX(-200px) rotateY(-90deg)");
            $(".out-right").css("transform","translateX(200px) rotateY(90deg)");
            $(".out-top").css("transform","translateY(-200px) rotateX(90deg)");
            $(".out-bottom").css("transform","translateY(200px) rotateX(-90deg)");
            setTimeout(function () {
                $(".out-front").css("transform","");
                $(".out-back").css("transform","");
                $(".out-left").css("transform","");
                $(".out-right").css("transform","");
                $(".out-top").css("transform","");
                $(".out-bottom").css("transform","");
            }, 2500);

        }
	</script>
</body>
</html>
